<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function (){
            //attr(属性名) 获取属性值
            //attr(属性名,属性值) 设置属性
            // $("span").attr("data-id","1002")
            // console.log($("span").attr("id"));
            // console.log($("span").attr("data-id"));

//          prop  获取字符串  true/false
            // var chk=$("#sex").prop("checked");
            // console.log(chk);
            // //  attr  返回 checked /undefined
            // var chk2=$("#sex").attr("checked");
            // console.log(chk2);

            // $(":checkbox").attr("checked",ture);
            // $(":checkbox").prop("checked",ture);

            $("#sex").change(function () {
                // $(":checkbox").prop("checked",ture); :checkbox 匹配所有复选框
                var che1=$(this).prop("checked");
                $(":checkbox:not([id])").prop("checked",che1);
                // console.log(che1)
            })
            $("#sex2").change(function () {
                $(":checkbox:not([id])").each(function (index,item) {
                   var ck= $(item).prop("checked");
                    $(item).prop("checked",!ck);
                })
            })

            // var html= $("div").html();
            // var text= $("div").text();
            // var val= $("div").val();
            // console.log(html,text,val);
            // $("div").html("<h1>h1</h1>");
            // $("div").html("<h1>h1</h1>");

            // $("div").css("样式","值")  只改行内样式
            // $("div").css("color","red")
            // $("div").width("100px"); css的简写
            // $("div").css("width");


        })
        //没有参数时获取 ， 带参数的设置
        //html 获取的是包含子元素 html标签的代码  div<span>span</span>
        //text 获取纯文本 只获取文本内容  div span 
        //val 获取的空 交互控件(表单控件)的值
        //在设置时 HTML会解析其中的标签($("div").html("<h1>h1</h1>");)  
        // text不会解析，只是原样输出 ($("div").html("<h1>h1</h1>");)
    </script>
</head>
<body>
    <div >div<span>span</span></div>
    <form action="#">
        <span id=name data-id="1001">姓名</span>
        <input type="text" name="name">
        <br>
        <input type="checkbox" name="sex" id="sex">
        <label for="sex">全选/全不选</label>
        <input type="checkbox" name="sex" id="sex2">
        <label for="sex">反选</label>
    </form>

    <input type="checkbox" name="">
    <input type="checkbox" name="">
    <input type="checkbox" name="">
</body>
</html>